<template>
  <div class="tab-container waybill-tab-container tab-fixed">
    <el-tabs v-model="activeName">
      <el-tab-pane label="运单编辑" name="edit">
        <keep-alive>
          <div class="padding">
            <!-- <el-button @click="toPage">toPage</el-button> -->
            <ProgressBar :progress-list="progress" />
            <BasicInfo :is-edit="isEdit" :waybill-info="waybillInfo" />
            <CargoInfo
              :is-edit="true"
              :goods-info.sync="goodsInfo"
              :old-goods-info="oldGoodsInfo"
              :waybill-id="waybillId"
              :order-locked="waybillInfo.orderLocked"
            />
            <InventorySummary
              :is-edit="isEdit"
              :in-stock-info="inStockInfo"
              :waybill-id="waybillId"
            />

            <ReturnInfo
              :return-batch-index="waybillInfo.returnBatchIndex"
              :is-edit="isEdit"
              :return-tracking-info.sync="returnTrackingInfo"
              :old-return-tracking-info="oldReturnTrackingInfo"
              :waybill-id="waybillId"
              :order-locked="waybillInfo.orderLocked"
              @getReturnInfo="getReturnInfo"
              @getOperation="getOperation"
              @getStockInfo="getStockInfo"
            />
            <OperationInstructionInfo
              :is-edit="isEdit"
              :operation-instruction-data.sync="OperationInstructionData"
              :old-operation-instruction-data="oldOperationInstructionData"
              :waybill-id="waybillId"
              :return-country="waybillInfo.returnCountry"
              :order-locked="waybillInfo.orderLocked"
              @getOperation="getOperation"
            />
            <PackingListInfo
              :is-edit="isEdit"
              :packing-list.sync="packingList"
              :waybill-id="waybillId"
              :order-locked="waybillInfo.orderLocked"
              :return-country="waybillInfo.returnCountry"
              @getPacking="getPacking"
            />
            <DeliveryInfo
              :is-edit="isEdit"
              :shipment-tracking-info.sync="shipmentTrackingInfo"
              :old-shipment-tracking-info="oldShipmentTrackingInfo"
              :waybill-id="waybillId"
              :order-locked="waybillInfo.orderLocked"
            />
            <Receivable
              :receivable-data="receivableData"
              :bill-status="billStatus"
              :waybill-id="waybillId"
            />
          </div>
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="文件列表" name="fileList" lazy>
        <FileList :waybill-id="waybillId" />
      </el-tab-pane>
      <el-tab-pane
        :label="
          `${waybillInfo.waybillNo}  操作批次${
            waybillInfo.returnBatchIndex ? waybillInfo.returnBatchIndex : 0
          }`
        "
        name="fileList1"
        disabled
      />
    </el-tabs>
    <div
      v-if="waybillInfo.seaAirWaybillNo"
      class="seaAir-btn"
      @click="triggerClick(waybillInfo.seaAirWaybillNo)"
    >
      {{ waybillInfo.seaAirWaybillNo }}
    </div>
  </div>
</template>
<script>
const ProgressBar = () => import('@/components/ProgressBar')
const InventorySummary = () => import('./components/InventorySummary')
const BasicInfo = () => import('./components/BasicInfo')
const CargoInfo = () => import('./components/CargoInfo')
const ReturnInfo = () => import('./components/ReturnInfo')
const FileList = () => import('./components/FileList')
const PackingListInfo = () => import('./components/PackingListInfo')
const DeliveryInfo = () => import('./components/DeliveryInfo')
const Receivable = () => import('./components/Receivable')
const OperationInstructionInfo = () =>
  import('./components/OperationInstructionInfo')
import {
  initAbroadWaybillRender,
  getGoodsInfoByWaybillId,
  getAbroadWaybillById,
  queryAbroadReturnReceiveGoodsByWaybillId,
  queryAbroadOperationByWaybillId,
  queryAbroadTrackAddresslist,
  queryAbroadPackingByWaybillId,
  initAbroadWaybillState,
  queryAbroadPaymentReceivable,
  getAbroadStockGoodsWaybillId
} from '@/api/abroadWaybill'
import { searchOrderByWaybillNo } from '@/api/waybill'
import { clone } from '@/utils/clone'
import { compileStr, uncompileStr } from '@/utils'
// import headerInfo from "./components/headerInfo";
export default {
  components: {
    InventorySummary,
    ProgressBar,
    ReturnInfo,
    BasicInfo,
    CargoInfo,
    FileList,
    OperationInstructionInfo,
    PackingListInfo,
    DeliveryInfo,
    Receivable
  },
  props: ['id'],
  data() {
    return {
      waybillId: '',
      isEdit: true,
      billStatus: 1,
      initInfo: {},
      activeName: 'edit',
      countryMap: {},
      serviceItemMap: {},
      waybillInfo: {},
      goodsInfo: [],
      returnTrackingInfo: [],
      oldReturnTrackingInfo: [],
      packingList: [],
      OperationInstructionData: [],
      shipmentTrackingInfo: [],
      oldGoodsInfo: [],
      oldShipmentTrackingInfo: [],
      oldOperationInstructionData: [],
      progress: [],
      inStockInfo: [],
      receivableData: []
    }
  },
  computed: {},
  watch: {},
  mounted() {
    if (this.$route.query.id) {
      this.waybillId = uncompileStr(this.$route.query.id)
    }
    this.init()
  },
  methods: {
    async init() {
      this.$store.dispatch('app/toggleDialog', true)

      initAbroadWaybillRender({}).then(res => {
        this.initInfo = res.data
      })

      getAbroadWaybillById({ id: this.waybillId }).then(waybillInfo => {
        waybillInfo.serviceItemArr = waybillInfo.serviceItem.split(',')
        this.waybillInfo = waybillInfo
        if (this.waybillInfo.billStatus) {
          this.billStatus = this.waybillInfo.billStatus
        }
        if (this.waybillInfo.orderLocked) {
          this.isEdit = false
        }
      })
      // 货物信息
      getGoodsInfoByWaybillId({ id: this.waybillId }).then(res => {
        if (res.code === 200) {
          if (res.data.length === 0) {
            this.goodsInfo = [{}]
            this.oldGoodsInfo = [{}]
          } else {
            this.goodsInfo = res.data
            this.oldGoodsInfo = clone(res.data)
          }
        }
      })

      this.getStockInfo()
      this.getPacking()
      this.getReturnInfo()
      this.getOperation()

      // 发货追踪信息T
      queryAbroadTrackAddresslist({
        id: this.waybillId
      }).then(res => {
        if (res.code === 200) {
          if (res.data.length === 0) {
            this.shipmentTrackingInfo = [{}]
            this.oldShipmentTrackingInfo = [{}]
          } else {
            this.shipmentTrackingInfo = res.data
            this.oldShipmentTrackingInfo = clone(res.data)
          }
        }
      })

      initAbroadWaybillState({ id: this.waybillId }).then(res => {
        if (res.code === 200) {
          this.progress = res.data
        }
      })
      queryAbroadPaymentReceivable({ id: this.waybillId }).then(res => {
        this.receivableData = res.data.abroadReceivableList
      })

      this.$store.dispatch('app/toggleDialog', false)
    },
    getStockInfo() {
      // 库存信息
      getAbroadStockGoodsWaybillId({
        waybillId: Number(this.waybillId)
      }).then(res => {
        console.log('getAbroadStockGoodsWaybillId :>> ', res)
        if (res) {
          this.inStockInfo = res
        }
      })
    },

    getPacking() {
      // 箱单信息
      queryAbroadPackingByWaybillId({ id: this.waybillId }).then(res => {
        if (res.code === 200) {
          if (res.data.length === 0) {
            this.packingList = [{}]
          } else {
            this.packingList = res.data
          }
        }
      })
    },

    getReturnInfo() {
      // 退货追踪信息
      queryAbroadReturnReceiveGoodsByWaybillId({ id: this.waybillId }).then(
        res => {
          if (res.code === 200) {
            const arr = []
            for (const i of res.data) {
              if (i.abroadSkuList) {
                for (const j of i.abroadSkuList) {
                  arr.push({
                    id: i.id,
                    trackNo: i.trackNo,
                    returnNo: i.returnNo,
                    shipmentId: i.shipmentId,
                    cartons: i.cartons,
                    sortNo: i.sortNo,
                    sku: j.sku,
                    skuId: j.id,
                    num: j.num,
                    receiptDate: i.receiptDate,
                    receiptPallets: i.receiptPallets,
                    receiptQuantity: j.receiptQuantity,
                    receiptCartons: i.receiptCartons,
                    location: j.location,
                    boxSpecifications: i.boxSpecifications,
                    receiptCondition: j.receiptCondition
                  })
                }
              } else {
                arr.push(i)
              }
            }
            if (arr.length === 0) {
              this.returnTrackingInfo = [{}]
              this.oldReturnTrackingInfo = [{}]
            } else {
              this.returnTrackingInfo = arr
              this.oldReturnTrackingInfo = clone(arr)
            }
          }
        }
      )
    },
    getOperation() {
      // 操作指令
      queryAbroadOperationByWaybillId({
        id: this.waybillId
      }).then(res => {
        if (res.data.length === 0) {
          this.OperationInstructionData = [{}]
          this.oldOperationInstructionData = [{}]
        } else {
          this.OperationInstructionData = res.data
          this.oldOperationInstructionData = clone(res.data)
        }
      })
    },
    async triggerClick(seaAirWaybillNo) {
      const data = await searchOrderByWaybillNo({
        waybillNo: seaAirWaybillNo
      })
      if (data.datas.length === 1) {
        const routeUrl = this.$router.resolve({
          name: 'WaybillDetails',
          params: { id: compileStr(data.datas[0].id.toString()) }
        })

        window.open(routeUrl.href, '_blank')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.title-icon {
  display: inline-block;
  width: 120px;
}
</style>

<style scoped>
/deep/ .el-tabs__item.is-disabled {
  color: #51abd1;
}
.seaAir-btn {
  position: absolute;
  top: 17px;
  left: 20%;
  z-index: 12;
  font-size: 14px;
  cursor: pointer;
}
</style>
